<canvas style="display: none"></canvas>
<!-- The <img> background color should be visible behind the html5.png test image: the
  image has an alpha channel, which should be preserved by the WEBP toDataURL encoder. -->
<img id="result" style="background-color: yellow">
<pre id="error"></pre>

<script>
if (window.testRunner)
    testRunner.waitUntilDone();

var image = new Image();

image.onload = function() {
    var canvas = document.querySelector('canvas');
    canvas.width = this.width * 2;
    canvas.height = this.height * 2;
    canvas.getContext('2d').drawImage(this, this.width / 2, this.height / 2);

    var dataURL = canvas.toDataURL('image/webp', 0.8); // good quality

    if (!dataURL.match(/^data:image\/webp[;,]/))
        error.textContent += "FAIL: the dataURL should have 'image/webp' type.";
    else
        result.src = dataURL;

    if (window.testRunner)
        testRunner.notifyDone();
};

image.src = 'resources/html5.png';
</script>
